<template>
  <maincontainer>
    <div
      class="w-full grid grid-cols-2 gap-y-1px gap-x-1px grid-flow-row-dense"
    >
      <mycard round>
        <div class="flex justify-start items-center h-30">
          <n-avatar
            round
            class="h-24 w-24 mr-2"
            object-fit="contain"
            src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
          />
          <div class="flex justify-center items-start flex-col ml-2">
            <span class="text-3xl">你好, DVAdmin, 开始您一天的工作吧！</span>
            <div>
              <span class="text-xl">{{ daojishi }}</span>
              <n-button
                @click="ctldrawer"
                type="primary"
                size="small"
                class="mx-1"
                >设置上下班时间</n-button
              >
            </div>
          </div>
        </div>
      </mycard>
      <mycard class="h-31" round>
        <tianqi></tianqi>
      </mycard >
       <mycard class="h-31" title="快捷导航" round>
        ...
      </mycard >
       <mycard class="h-31" title="今日日程" round>
        ...
      </mycard >
       <mycard class="h-31" title="未读邮件" round>
        ...
      </mycard >
      <mycard class="h-31" title="日志" round>
        ...
      </mycard>
    </div>
  </maincontainer>
</template>

<script setup name="Workflat" lang="ts">
import { useRoute, useRouter } from 'vue-router'
import useState from '@/hooks/useState'
import usetime from '@/hooks/mytime'
import {computed, inject} from 'vue'
const router = useRouter()
const route = useRoute()

// 上班时间
const timetostr = (shijian: number) => {
  const xiaoshi = Math.floor(shijian / (60 * 60 * 1000))
  const fenzhong = Math.floor((shijian % (60 * 60 * 1000)) / (60 * 1000))
  const miaozhong = Math.floor(
    ((shijian % (60 * 60 * 1000)) % (60 * 1000)) / 1000,
  )
  return `${xiaoshi < 10 ? '0' + xiaoshi : xiaoshi}:${
    fenzhong < 10 ? '0' + fenzhong : fenzhong
  }:${miaozhong < 10 ? '0' + miaozhong : miaozhong}`
}
const workTime = useState('workTime', { startTime: null, endTime: null })
const nowTime = usetime()
const daojishi = computed(() => {
  // 通过取余的方式获取毫秒值
  const shangban = workTime.value.startTime % (24 * 60 * 60 * 1000)
  const xiaban = workTime.value.endTime % (24 * 60 * 60 * 1000)
  const xianzai = nowTime.value.getTime() % (24 * 60 * 60 * 1000)
  if (xianzai < shangban) {
    return `还有${timetostr(shangban - xianzai)}上班`
  }
  if (xianzai > xiaban) {
    return `已经下班${timetostr(xianzai - xiaban)},你怎么还在啊？`
  }
  return `还有${timetostr(xiaban - xianzai)}下班`
})

// 抽屉显示隐藏
const drawerActive = useState('drawerActive', false)
const ctldrawer = () => {
  drawerActive.value = !drawerActive.value
}


const zhucefunc:Function|undefined = inject("zhuceshuaxinfunc")
// 初始化函数
const init = () => {

}

// 初始化区域
init()
zhucefunc && zhucefunc({[route.name!.toString()]:init})
</script>

<style scoped>
</style>